<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="<%=basePath%>js/echarts.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
</head>
<body>
<div id="main1" style="width: 880px;height:650px;margin: auto;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: ['八宝山街道', '八角街道', '苹果园', '杨庄街道', '古城街道', '金顶街街道', '广宁街道', '鲁谷街道', '五里坨街道']
        },
        series: [
            {
                name: '数据统计',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 16,
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1848, name: '社区卫生服务站'},
                    {value: 675, name: '社区养老服务驿站'},
                    {value: 800, name:'养老照料中心'},
                    {value: 879, name: '社区卫生服务中心',selected:true}
                ]
            },
            {
                name: '访问来源',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: {
                    length: 30,
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,

                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: [
                    {value: 648, name: '八宝山街道'},
                    {value: 335, name: '八角街道'},
                    {value: 310, name: '苹果园'},
                    {value: 251, name: '杨庄街道'},
                    {value: 234, name: '古城街道'},
                    {value: 147, name: '金顶街街道'},
                    {value: 135, name: '广宁街道'},
                    {value: 135, name: '鲁谷街道'},
                    {value: 135, name: '广宁街道'},
                    {value: 102, name: '五里坨街道'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</div>
</body>
</html>
